<template>
<view>
	<view class="hb-comment">
		<!-- 阅读数-start -->
		
		<!-- 阅读数下边那条线-start -->
		<view class="seg_line_box">
			<view class="seg_line"></view>
			<view class="seg_dot"></view>
			<view class="seg_line"></view>
		</view>
		<!-- 阅读数下边那条线-end -->
		<!-- 评论主体-start -->
		<view class="comment-list" v-if="commentData.length != 0">
			<!-- 评论主体-顶部数量及发表评论按钮-start -->
			<view class="comment-num">
				<view>共 {{pingluntongji}} 条评论</view>
				<!--view class="add-btn">
					<button type="primary" size="mini" @click="commentInput">发表评论</button>
				</view-->
			</view>
			<!-- 评论主体-顶部数量及发表评论按钮-end -->
			<!-- 评论列表-start -->
			<view class="comment-box" v-for="(item, index) in commentData" :key="index">
				<view class="comment-box-item">
					<view>
						<image :src="item.touxiang" mode="aspectFill" class="avatar"></image>
					</view>
					<view class="comment-main">
						<!-- 父评论体-start -->
						<view class="comment-main-top">
							<view class="nick-name-box d-kuan" >
								<view class="d-zuo nick-name d-you-10 d-chaochu-1">{{item.mingcheng}}</view>
								<view class="d-zuo comLogo com1 " >{{item.yonghuzu}}</view>
								<view v-if="item.pinglunshu > 7" class="d-you">
									<view class="d-kuan-80">
										<view class="d-zuo-10 d-bian-1 d-yuanjiao-50 d-neikuang-0-2 d-buhuanhang d-beijing-hongse-guodu" >
											<view class=" d-chaochu-1 d-wenzi-yanse-bai d-wenzi-10 ">热评</view>
											<u-icon name="chat" color="#fffff3" size="12"  labelPos="bottom" labelSize="10"></u-icon>
										</view>
									</view>
								</view>
								<view class="d-you">
									<Dxiala :localdata="options" @change="lahei($event,item.id,item.uid)" >
										<u-icon name="minus-people-fill" color="#dfdfdf" size="20"></u-icon>
									</Dxiala>
								</view>
								
								<view v-if="index==0" class="d-you">
									<view class="d-kuan-80">
										<view class="d-zuo-10 d-bian-1 d-yuanjiao-50 d-neikuang-0-2 d-buhuanhang d-beijing-lvse" >
											
											<view class=" d-chaochu-1 d-wenzi-yanse-bai d-wenzi-10 ">首评</view>
											<u-icon name="tags-fill" color="#fffff3" size="12"  labelPos="bottom" labelSize="10"></u-icon>
										</view>
									</view>
									
								</view>
							</view>
							
						</view>
						<view class="comment-main-content d-wenzi-hei">
							<u-parse :content="item.content" :selectable="true" :tagStyle="style"></u-parse>
							<!--u-read-more :toggle="true" :showHeight="100" textIndent="0em" closeText="展开">
								
							</u-read-more-->
							<!--rich-text :nodes="item.content" @load="load"></rich-text-->
						</view>
						<view class="comment-main-foot">
							<view class="foot-time">{{item.inputtimes}}</view>
							<view class="foot-btn" @click="reply(item.mingcheng,item.mingcheng,item.touxiang,tieziindex.id,item.id,item.uid,tieiddata)">回复</view>
							<view class="foot-btn" v-if="item.owner" @click="confirmDelete(item.id)">删除</view>
						</view>
						<!-- 父评论体-end -->
						<!-- 子评论列表-start -->
						<view class="comment-sub-box">
							<view class="comment-sub-item d-buhuanhang" v-for="(each, index2) in item.rlist" :key="index2">
								<view class="d-buhuanhang d-kuan">
									<view>
										<image :src="each.touxiang" mode="aspectFill" class="avatar">
										</image>
										
									</view>
									<view class="comment-main">
										<view class="sub-comment-main-top">
											<view class="nick-name d-you-10">{{each.mingcheng}}</view>
											<view class="comLogo com1" >{{each.yonghuzu}}</view>
											
											
										</view>
										<view class="comment-main-content d-wenzi-hei">
											<u-parse :content="each.content" :selectable="true" :tagStyle="style"></u-parse>
											<!--u-read-more :toggle="true" :showHeight="100" textIndent="0em" closeText="展开">
											</u-read-more-->
											<!--rich-text :nodes="each.content" @load="load"></rich-text-->
										</view>
										<view class="comment-main-foot">
											<view class="foot-time">{{each.inputtimes}}</view>
											<!--view class="foot-btn" @click="reply(each.mingcheng,item.mingcheng,each.touxiang,each.id)">
												回复{{each.content}}
											</view-->
											<view class="foot-btn" v-if="each.owner" @click="confirmDelete(each.id)">删除
											</view>
										</view>
										
									</view>
								</view>
								<view class="d-you" >
									<Dxiala :localdata="options" @change="lahei($event,each.id,each.uid)">
										<u-icon name="minus-people-fill" color="#dfdfdf" size="20"></u-icon>
									</Dxiala>
								</view>
							</view>
							
						</view>
						<!-- 子评论列表-end -->
					</view>
				</view>
			</view>
			<u-gap height="60" :bgColor="fenggeyanse=='light' ? '#f9f9f9' : '#2b2b2b'"></u-gap>
			<!-- 评论列表-end -->
		</view>
		<!-- 评论主体-end -->
		<!-- 无评论-start -->
		<view class="comment-none" v-else>
			<view class="d-kuan d-wenzi-juzhong" @click="reply(tieziindex.mingcheng,tieziindex.mingcheng,tieziindex.touxiang,tieziindex.id,0,0,tieiddata)">
				<u-icon name="chat" size="50"></u-icon>
			</view>
			
			暂无评论，<span @click="reply(tieziindex.mingcheng,tieziindex.mingcheng,tieziindex.touxiang,tieziindex.id,0,0,tieiddata)" style="color: #007AFF;">抢沙发</span>
		</view>
		<!-- 无评论-end -->
		
		
		
	</view>
	<!-- 新增评论-start -->
	<view class="comment-submit-box" v-if="submit" @click="closeInput">
		<!-- 下边的click.stop.prevent用于让上边的click不传下去，以防点到下边的空白处触发closeInput方法 -->
		<view  class="comment-add" @click.stop.prevent="stopPrevent" :style="{bottom: KeyboardHeight + 'px',backgroundColor: fenggeyanse =='light'? '#ffffff':'#0d0d0d'}">
			<view class="comment-submit">
				<view class="btn-click cancel" @click="closeInput">取消</view>
				<view>
					<view class="replayTag" v-show="showTag">
						<span class="d-you-10">回复</span> <u-avatar  v-if="rTouxiang" :src="rTouxiang" shape="circle" size="20"></u-avatar>
						<view v-if="rUser" class="d-zuo-10">  {{rUser}} 的帖子</view>
						<!--view @click="tagClose" class="replyTagClose">×</view-->
					</view>
				</view>
				<view>
					<!--view class="btn-click" @click="add">发布</view-->
					<button type="primary" size="mini" @click="add">发评论</button>
				</view>
			</view>
			<textarea :style="{'color': fenggeyanse =='light'? '#0d0d0d':'#fff4f4'}" class="textarea" @input="pingluninput($event)" v-model="commentReq.content" :placeholder="placeholder" :adjust-position="false" :show-confirm-bar="false"
				@blur="blur" @focus="focusOn" :focus="focus" maxlength="800"></textarea>
		</view>
	</view>
	<!-- 新增评论-end -->
	
	<view class="d-kuan d-dibu-0 d-beijing-bai">
		<view class="d-neikuang-zuoyou-20-shangxia-10">
			<u-row
			    v-if="shouye==0"
				justify="space-between"
				gutter="10"
			>
				<u-col span="5"><!--commentInput-->
					<u-search :bgColor="fenggeyanse=='light' ? '#efefef' : '#424242'" :showAction="false" placeholder="说说您的看法..." :disabled="true" @click="reply(tieziindex.mingcheng,tieziindex.mingcheng,tieziindex.touxiang,tieziindex.id,0)" :animation=false searchIcon="chat" ></u-search>
				</u-col>
				<u-col span="2">
					<u-icon name="chat" color="#5d5d5d" size="20" :label="tieziindex.comments" @click="reply(tieziindex.mingcheng,tieziindex.mingcheng,tieziindex.touxiang,tieziindex.id,0)" labelPos="bottom" labelSize="12"></u-icon>
				</u-col>
				<u-col span="2">
					<u-icon :name="shoucang" color="#5d5d5d" size="20" label="收藏" @click="getShoucang(tieziindex.id)" labelPos="bottom" labelSize="12"></u-icon>
				</u-col>
				<u-col span="2">
					<u-icon :name="dianzan" color="#5d5d5d" size="20" label="点赞" @click="getZan(tieziindex.id,tieziindex.uid,)" labelPos="bottom" labelSize="12"></u-icon>
				</u-col>
				
			</u-row>
			<u-row
			    v-else
				justify="space-between"
				gutter="10"
			>
				<u-col span="10"><!--commentInput-->
					<u-search :bgColor="fenggeyanse=='light' ? '#efefef' : '#424242'" :showAction="false" placeholder="说说您的1看法..." :disabled="true" @click="reply(tieziindex.mingcheng,tieziindex.mingcheng,tieziindex.touxiang,tieziindex.id,0,0,tieiddata)" :animation=false searchIcon="chat" ></u-search>
				</u-col>
				<u-col span="2"><!--commentInput-->
					<u-icon name="close-circle-fill" color="#5d5d5d" size="20" @click="guanbi()" labelPos="bottom" labelSize="12"></u-icon>
				</u-col>
				
				
			</u-row>
		</view>
	</view>
	
	</view>
</template>

<script>
	import Dxiala from "@/components/d-xiala/d-xiala";  //引入组件
	export default {
		name: 'd-comment',
		props: {
			cmData: {
				type: Array,
				default: () => {
					return [];
				}
			},
			tieziindex: {
				type: Object,
				default: () => {
					return {};
				}
			},
			dianzan: {
				type: String,
				default:""
			},
			pingluntongji: {
				type: [Number, String],
				default:0
			},
			shouye: {
				type: [Number, String],
				default:0
			},
			shipinhuifudata: {
				type: Boolean,
				default:true
			},
			keycode: {
				type: String,
				default:""
			},
			tieiddata: {
				type: [Number, String],
				default:0
			},
			shoucang: {
				type: String,
				default:""
			},
			domain:{
				type: String,
				default:""
			},
			deleteTip: {
				type: String,
				default: () => {
					return '操作不可逆，如果评论下有子评论，也将被一并删除，确认？';
				}
			},
			fenggeyanse: {
				type: [String, Number],
				default: ''
			}
		},
		
		
		components: {
			  Dxiala
		},
		watch: {
			cmData: {
				handler: function(newVal, oldVal) {
					this.init(newVal);
				},
				immediate: true
			}
		},
		data() {
			return {
				"commentData": null,
				"placeholder": "请输入评论",
				"commentReq": {
					"pId": null, // 评论父id
					"content": null ,// 评论内容
					"rid": null ,// 评论子id
					"tieid": null // 评论子id
				},
				
				"showTag": false, // 标签展示与否
				"focus": false, // 输入框自动聚焦
				"submit": false, // 弹出评论
				"KeyboardHeight": 0 ,// 键盘高度
				value6: 0,
				"pTouxiang":'', //头像-回复人
				"pUser": '', // 标签-回复人
				rTouxiang:'',
				rUser:'',
				eUser:'',
				eTouxiang:'',
				style: {
					// 字符串的形式
					p: 'line-height: 50rpx;',
					span: 'font-size: 30rpx'
				},
				// 右边菜单内容
				options: [
					{
						value: '',
						zhi:'1',
						text: '拉黑此用户'
					},
					{
						zhi:'2',
						value: '',
						text: '屏蔽此评论'
					}
				],
				
			};
		},
		
		onLoad: function (options) {
			//console.log("123",commentData.list.length)
			
		},
		mounted: function() {
			uni.onKeyboardHeightChange(res => {
				this.KeyboardHeight = res.height;
			})
		},
		methods: {
			// 初始化评论
			init(cmData) {
				// for (var i in cmData.comment) {
				// 	cmData.comment[i].hasShowMore = false;
				// 	for (var j in cmData.comment[i].children) {
				// 		cmData.comment[i].children[j].hasShowMore = false;
				// 	}
				// }
				this.commentData = cmData;
				
			},
			// 没用的方法，但不要删
			stopPrevent() {},
			// 回复评论
			reply(rUser, reUser, rTouxiang, pId, rid,erjiuid,tieid) {
				var that = this;
				
				that.rUser = rUser;
				that.rTouxiang = rTouxiang;
				that.commentReq.pId = pId;
				that.commentReq.rid = rid;
				that.commentReq.erjiuid = erjiuid;
				that.commentReq.tieid = tieid;
				//console.log("名称tieid",that.commentReq.tieid);
				/*console.log("名称",that.rUser);
				console.log("名称2",reUser);
				console.log("头像",that.rTouxiang);*/
				
				if (reUser) {
					//that.commentReq.content = '@' + rUser + rTouxiang + ' ';
				} else {
					that.commentReq.content = '';
				}
				that.showTag = true;
				that.commentInput();
			},
			// 回复评论
			eeply(eUser, eeUser, eTouxiang, pId) {
				var that = this;
				
				that.eUser = eUser;
				that.eTouxiang = eTouxiang;
				that.commentReq.pId = pId;
				//that.commentReq.tieid = tieid;
				console.log("e名称",that.eUser);
				console.log("e名称2",eeUser);
				
				
				if (eeUser) {
					that.commentReq.content = '@' + eUser + eTouxiang + ' ';
				} else {
					that.commentReq.content = '';
				}
				that.showTag = true;
				that.commentInput();
			},
			// 删除评论前确认
			confirmDelete(commentId) {
				var that = this;
				uni.showModal({
					title: '警告',
					content: that.deleteTip,
					confirmText: '确认删除',
					success: function(res) {
						if (res.confirm) {
							that.$emit('del', commentId);
						}
					}
				});
			},
			// 新增评论
			add() {
				console.log("e名称2",this.commentReq);
				if (this.commentReq.content == null || this.commentReq.content.length < 2) {
					uni.showToast({
						title: '评论内容过短',
						duration: 2000
					});
					return
				}
				//console.log("e名称2",this.commentReq);
				this.$emit('add', this.commentReq);
			},
			// 点赞评论
			like(commentId) {
				this.$emit('like', commentId);
			},
			// 点赞
			getZan(tieziid,uid) {
				
				this.$emit('getZan', tieziid,uid);
			},
			//关闭
			guanbi(){
				this.$emit('guanbi');
			},
			// 收藏
			getShoucang(tieziid) {
				this.$emit('getShoucang', tieziid);
			},
			// 新增完成
			addComplete() {
				this.commentReq.content = null;
				this.tagClose();
				this.closeInput();
			},
			// 点赞完成-本地修改点赞结果
			likeComplete(commentId) {
				for (var i in this.commentData.comment) {
					if (this.commentData.comment[i].id == commentId) {
						this.commentData.comment[i].hasLike ? this.commentData.comment[i].likeNum-- : this.commentData
							.comment[i].likeNum++;
						this.commentData.comment[i].hasLike = !this.commentData.comment[i].hasLike;
						return
					}
					for (var j in this.commentData.comment[i].children) {
						if (this.commentData.comment[i].children[j].id == commentId) {
							this.commentData.comment[i].children[j].hasLike ? this.commentData.comment[i].children[j]
								.likeNum-- : this.commentData.comment[i].children[j].likeNum++;
							this.commentData.comment[i].children[j].hasLike = !this.commentData.comment[i].children[j]
								.hasLike;
							return
						}
					}
				}
			},
			// 删除完成-本地删除评论
			deleteComplete(commentId) {
				for (var i in this.commentData.comment) {
					for (var j in this.commentData.comment[i].children) {
						if (this.commentData.comment[i].children[j].id == commentId) {
							this.commentData.comment[i].children.splice(Number(j), 1);
							return
						}
					}
					if (this.commentData.comment[i].id == commentId) {
						this.commentData.comment.splice(Number(i), 1);
						return
					}
				}
			},
			// 展开评论
			showMore(commentId) {
				for (var i in this.commentData.comment) {
					if (this.commentData.comment[i].id == commentId) {
						this.commentData.comment[i].hasShowMore = !this.commentData.comment[i].hasShowMore;
						this.$forceUpdate();
						return
					}
					for (var j in this.commentData.comment[i].children) {
						if (this.commentData.comment[i].children[j].id == commentId) {
							this.commentData.comment[i].children[j].hasShowMore = !this.commentData.comment[i].children[j]
								.hasShowMore;
							this.$forceUpdate();
							return
						}
					}
				}
			},
			// 输入框失去焦点
			blur() {
				this.focus = false;
			},
			// 输入框聚焦
			focusOn() {
				this.$emit('focusOn');
			},
			// 标签关闭
			tagClose() {
				this.showTag = false;
				this.pUser = null;
				this.commentReq.pId = null;
			},
			// 输入评论
			commentInput() {
				//this.pUser = pUser;
				//this.pTouxiang = pTouxiang;
				// TODO 调起键盘方法
				if(!this.keycode){
					uni.showModal({
						title: '请先登录',
						//content: '请先登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				} else {
					if(this.shipinhuifudata){
						this.submit = true;
						setTimeout(() => {
							this.focus = true;
						}, 50)
					} else {
						console.log('认证');
						uni.showModal({
							title: '需要实名认证',
							//content: '请先登录',
							confirmText: '前往认证',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/shezhi/renzheng'
									});
								}
							}
						});
					}
				}
				
				
			},
			// 关闭输入评论
			closeInput() {
				this.focus = false;
				this.submit = false;
			},
			load() {
				this.$refs.uReadMore.init();
			},
			//评论
			pingluninput(e){
				var duixin = this; 
			   let newStr = '<p>' + e.target.value + '</p>';
			   let pingluncontent = newStr.replace(/\n/g,"</p><p>");
			   //duixin.pingluncontent = content;
			   //console.log(pingluncontent);
			   this.$emit('pingluncontent', pingluncontent);
			},
			//拉黑
			lahei(data,id,uid){
				var duixin = this; 
				//console.log(data);
				if(data.zhi==1){
					duixin.options[0].value =uid;
				}
				if(data.zhi==2){
					duixin.options[1].value =id;
				}
				this.$emit('lahei', data,id);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.hb-comment {
		padding: 20rpx;
	}

	.top-read {
		font-size: 28rpx;
		padding-left: 10rpx;
		color: #999999;
	}

	.seg_line_box {
		display: flex;
		height: 5rpx;
		justify-content: space-between;
		margin: 5rpx 0;
	}

	.seg_line {
		width: 45%;
		border-bottom: 1rpx solid var(--seg_line);
	}

	.seg_dot {
		width: 8%;
		border-bottom: 5rpx dotted #dbdbdb;
	}

	.comment-num {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	.comment-box {
		padding: 10rpx 0;
	}

	.comment-box-item {
		display: flex;
	}

	.comment-main {
		padding-left: 20rpx;
	}

	.comment-main-top {
		width: 600rpx;
		padding-top: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.sub-comment-main-top {
		/*width: 510rpx;*/
		padding-top: 6rpx;
		display: flex;
		/*justify-content: space-between;*/
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.nick-name-box {
		/*display: flex;*/
		/*align-items: center;*/
	}

	.comLogo {
		margin-right: 18rpx;
		font-size: 22rpx;
		border-radius: 10rpx;
		padding: 5rpx 15rpx;
		color: #FFFFFF;
	}

	.com1 {
		background-color: var(--com1);
	}

	.com2 {
		background-color: #f19c0b;
	}

	.com3 {
		background-color: #c8da85;
	}

	.com4 {
		background-color: #bfd0da;
	}

	.nick-name {
		color: #2d8cf0;
	}

	.isLike {
		font-size: 28rpx;
		padding-right: 10rpx;
		color: #2d8cf0;
	}

	.notLike {
		font-size: 28rpx;
		padding-right: 10rpx;
		color: #999999;
	}

	.comment-main-content {
		padding: 10rpx 10rpx 10rpx 0;
	}

	.comment-main-foot {
		display: flex;
		font-size: 22rpx;
	}

	.replayTag {
		color: #484a4d;
		margin-bottom: 5px;
		/*border: 1px solid #c8c9cc;*/
		/*background-color: #f4f4f5;*/
		border-radius: 3px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		padding: 5px 10px;
	}

	.replyTagClose {
		font-size: 20px;
		line-height: 12px;
		padding: 0 0 2px 5px;
	}

	.foot-btn {
		padding-left: 10rpx;
		color: #007AFF;
	}

	.comment-sub-box {
		padding: 20rpx 0;
		
	}

	.comment-sub-item {
		padding: 20rpx;
		/*display: flex;*/
		background-color: var(--comment-sub-item);
		border-radius: 10px;
		margin-bottom: 20rpx;
	}

	.comment-none {
		
		padding: 20rpx;
		width: 100%;
		text-align: center;
		color: #999999;
	}

	.comment-submit-box {
		position: fixed;
		display: flex;
		align-items: flex-end;
		z-index: 9900;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		background-color: rgba($color: #000000, $alpha: 0.5);
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
	}

	.comment-add {
		position: fixed;
		background-color: #FFFFFF;
		width: 100%;
		padding: 0rpx;
		border: 1px solid #ddd;
		transition: .3s;
		//-webkit-transition: .3s;
		border-radius: 20rpx 20rpx 0 0;
	}

	.btn-click {
		color: #007AFF;
		font-size: 28rpx;
		padding: 10rpx;
	}

	.cancel {
		color: #606266;
	}

	.textarea {
		height: 300rpx;
		padding: 16rpx;
		width: 100%;
	}

	.comment-submit {
		padding: 5rpx 20rpx 0 20rpx;
		border-bottom: 1px dashed #ddd;
		width: calc(100% - 40rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.foot-time {
		color: #abafb6;
	}
</style>
